<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>实时操作-设置航线</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/static/plugin/layui/css/layui.css}" media="all">
    <style type="text/css">

    </style>
</head>
<body>
<!---->
<div style="padding: 5px;">
    <!--切换模式-->
    <div id="switchModeForm" style="font-size: 20px;padding: 10px;" class="layui-row">
        <div class="layui-col-md10">
            <form class="layui-form layui-from-pane" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">模式：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="mode" lay-filter="mode" value="1" title="航行模式">
                        <input type="radio" name="mode" lay-filter="mode" value="2" title="漂浮模式">
                        <input type="radio" name="mode" lay-filter="mode" value="3" title="锚泊模式">
                        <input type="radio" name="mode" lay-filter="mode" value="4" title="单点循环">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">操作：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="modeStatus" lay-filter="modeStatus" value="1" title="运行">
                        <input type="radio" name="modeStatus" lay-filter="modeStatus" value="2" title="暂停">
                        <input type="radio" name="modeStatus" lay-filter="modeStatus" value="3" title="停止">
                    </div>
                </div>
                <div style="margin: 30px 15%;">
                    <button type="button" class="layui-btn  layui-btn-submit " lay-submit=""
                            lay-filter="switchModeButton">确定
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary" id="switchModeBack">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>

<input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}">
<input type="hidden" th:value="${currentMode}" id="currentMode">
<input type="hidden" th:value="${currentModeStatus}" id="currentModeStatus">
<input type="hidden" th:value="${currentNavigationId}" id="currentNavigationId">

<script th:src="@{/static/js/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/static/plugin/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/js/app.js}" charset="utf-8"></script>
<script src="/static/js/whysu.js" th:src="@{/static/js/whysu.js}"></script>

<script>
    layui.use(['jquery', 'table'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;

        // 当前模式
        var currentMode = $('#currentMode').val();
        // 当前模式运行状态
        var currentModeStatus = $('#currentModeStatus').val();
        // 当前航程表id
        var currentNavigationId = $('#currentNavigationId').val();

        //页面一打开就执行
        layer.ready(function () {
            selectCurrentModeButton(currentMode, currentModeStatus);
        });


        /** 点击确定按钮 */
        form.on('submit(switchModeButton)', function (massage) {
            // 选择的值
            var selectMode = massage.field.mode;
            var selectModeStatus = massage.field.modeStatus;
            // 切换模式
            switchModeFunction(selectMode, selectModeStatus, currentNavigationId, true, NO_VALUE);
        });


        $("#switchModeBack").on('click', function () {
            parent.layer.closeAll();
        });

        /**
         * 选中当前的模式
         *
         * @param mode 航行模式
         * @param modeStatus 航行状态
         */
        function selectCurrentModeButton(mode, modeStatus) {
            //console.log(mode + "." + modeStatus + "." + currentNavigationId);
            // 如果当前没有航线，则默认航行+运行
            if (currentNavigationId == null || currentNavigationId == '') {
                $("input[name=mode][value='1']").prop("checked", "true");
                $("input[name=modeStatus][value='1']").prop("checked", "true");
            } else {
                // 默认不选中
                $("input[name=mode][value='1']").prop("checked", "false");
                $("input[name=mode][value='2']").prop("checked", "false");
                $("input[name=mode][value='3']").prop("checked", "false");
                $("input[name=modeStatus][value='1']").prop("checked", "false");
                $("input[name=modeStatus][value='2']").prop("checked", "false");
                $("input[name=modeStatus][value='3']").prop("checked", "false");
                // 选中
                if (mode != null && mode != '') {
                    $("input[name=mode][value=" + mode + "]").prop("checked", "true");
                }
                if (modeStatus != null && modeStatus != '') {
                    $("input[name=modeStatus][value=" + modeStatus + "]").prop("checked", "true");
                }
            }
            // 需要执行这段代码才会刷新
            form.render();
        }

    });
</script>

</body>
</html>